<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">

      <!--
注意，参数表达式有一些约束，
参见下面“动态参数值的限制”与“动态参数语法的限制”章节的解释
-->
<a v-bind:[ame]="url">去百度</a>
{{attributeName}}

  <a v-bind:[attributeName]="url"> 123 </a>

      <p v-show="see"> Now you see me </p>
      <button @click="count++">{{ count }}</button>
      <span>Message: {{ rawHtml }}</span>
      <p>Using v-html directive: <span v-html="rawHtml"></span></p>
      <div :id>xxxx</div>
      {{  count  +  1  }}
      {{ ok? 1111:22222 }}
    </div>
  </body>
</html>
<script type="module">
  import { createApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
  const app = createApp({
    data() {
      return {   
        ame:'application',
        attributeName:'title',   
        url:"https://www.baidu.com/",
        count: 0,
        rawHtml :"<h1>Message</h1>",
        id:"div1",
        ok:true ,
        see : false 
      };
    },
    computed:{
      attributeName(){
        return 'href';
      }
    }
  });

  app.mount("#app");
  app.config.errorHandler = (err) => {

  /* 处理错误 */
  console.log(  err.message );
}
</script>
